<template>
  <div class="bg-white h-screen">
    <div class="bg-white md:m-6 h-screen">
      <Table
        class="main-table"
        size="large"
        :columns="tableColumns"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        :scroll="scroll"
        @change="handleTableChange"
        bordered
        sticky
      >
        <template #action="{ record }">
          <span class="flex justify-center">
            <div v-if="record.subscribedAppCount === '0'">
              <a class="font-bold" disabled> <ExclamationCircleOutlined /></a>
            </div>
            <div v-else-if="record.subscribedAppCount !== '0'">
              <span v-per="'detail'">
                <a class="font-bold" @click="handleView(record)"> <ExclamationCircleOutlined /></a>
              </span>
            </div>
          </span>
        </template>
      </Table>
    </div>
    <DetailDrawer ref="drawerRef"></DetailDrawer>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { Table } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { getTenantList } from '/@/api/maintenance-center/resource-monitor/for-tenant/resourceMonitor';
import DetailDrawer from '/@/views/maintenance-center/resource-monitor/for-tenant/components/detailDrawer.vue';
import { TableProps } from 'ant-design-vue/lib/vc-table/Table';

const tableColumns = [
  {
    title: '租户名称',
    dataIndex: 'tenantName',
    width: '200px',
  },
  {
    title: '租户编码',
    dataIndex: 'tenantCode',
    width: '200px',
  },
  {
    title: '注册时间',
    dataIndex: 'createdTime',
    key: 'createdTime',
    width: '200px',
  },
  {
    title: '当前订阅应用数',
    dataIndex: 'subscribedAppCount',
    key: 'subscribedAppCount',
    width: '200px',
  },
  {
    title: '操作',
    dataIndex: 'action',
    slots: {
      customRender: 'action',
    },
    width: '200px',
  },
];

const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
const dataSource = ref([]);
let current = ref(1);
let size = ref('10');
const total = ref('0');

const drawerRef = ref(null);
const pagination = computed(() => ({
  showSizeChanger: true,

  total: total.value,
  current: current.value,
  size: size.value,
  showTotal: (total) => {
    return `共 ${total} 条`;
  },
}));

onMounted(() => {
  try {
    getTenantList().then((res) => {
      dataSource.value = res;
      total.value = res.length;
    });
  } finally {
    loading.value = false;
  }
});

const handleTableChange: TableProps['onChange'] = (pag) => {
  pagination.value.current = pag.current;
  pagination.value.size = pag.size;
  if (Number(pagination.value.size) > 10) {
    scroll.value = { x: 'max-content', y: 500 };
  }
  getTenantList().then((res) => {
    dataSource.value = res;
    total.value = res.length;
    current.value = pag.current;
    size.value = pag.size;
  });
};

function handleView(record: Recordable) {
  drawerRef.value.showDrawer(record.tenantCode);
}
</script>

<style lang="less" scoped></style>
